<script lang="ts" setup>
import { ref, onMounted } from "vue";

const targetEl = ref(null); // 声明 ref
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    console.log("目标以进入可视区域");
  }else{
    console.log("目标已离开可视区域");
  }
}, {});
console.log(observer);
onMounted(() => {
  console.log(targetEl.value); // HTMLElement
  if (targetEl.value) {
    observer.observe(targetEl.value);
  }
});
const rootEl = ref(null); // 声明 ref
console.log(rootEl.value); // HTMLElement
// 获取整个页面 HTML
//console.log(document.documentElement.outerHTML);
// 使用示例

let text = ref("");
class PersonObj {
  public name: string;
  public age: number;
  public address: string;
  constructor(name: string, age: number, address: string) {
    this.name = name;
    this.age = age;
    this.address = address;
  }
  private sayHello() {}
  public sayHi() {
    console.log("Hi");
  }
}
PersonObj.prototype.sayHi = () => console.log("Hello, I am a person!");
let zhangsan = new PersonObj("张三", 20, "北京市");
console.log(zhangsan); // 张三
let lisi = new PersonObj("李四", 25, "上海市");
console.log(lisi);
lisi.sayHi();
</script>
<template>
  <p>{{ text }}</p>
  <p>姓名：{{ zhangsan.name }}</p>
  <p>年龄：{{ zhangsan.age }}</p>
  <div ref="root">
    <p>{{ text }}</p>
  </div>
  <div style="height: 125vh; border: 1px solid #ccc"></div>
  <div ref="targetEl" style="height: 15vh; background-color: #f00"></div>
  <keep-alive><MilongUI></MilongUI> </keep-alive>
</template>
<style lang="css" scoped></style>
